import { useSyncExternalStore } from 'react';
import { todosStore } from './21-todos';

 function App() {
  // 该 todos 可以获取到外部状态中的所有数据内容
  // 可以用来操作外部的数据
  const todos = useSyncExternalStore(todosStore.subscribe, todosStore.getSnapshot);

  return (
    <>
      <button onClick={() => todosStore.addTodo()}>添加 todo</button>
      <hr />
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
    </>
  );
}
export default App
